 <!-- 这个base模板可以让首页、注册、登录三个页面共五个页面继承 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 网页标题内容块 -->
    <title></title>
    <link rel="stylesheet" type="text/css" href="/static/css/reset.css">
	<link rel="stylesheet" type="text/css" href="/static/css/main.css">
    <!-- 网页顶部引入文件块 --> 
    
     

</head>
<body>
<!-- 网页顶部欢迎信息块 -->

    <div class="header_con">
		<div class="header">
			<div class="welcome fl">欢迎来到天天生鲜!</div>
			<div class="fr">
				
				<div class="login_btn fl">
					欢迎您：<em>admin</em>
					<span>|</span>
					<a href="/user/logout">退出</a>
				</div>
				
				<div class="user_link fl">
					<span>|</span>
					<a href="/user/center/user_center_info.html">用户中心</a>
					<span>|</span>
					<a href="/cart/">我的购物车</a>
					<span>|</span>
					<a href="/user/center/user_center_order.html">我的订单</a>
				</div>
			</div>
		</div>
	</div>


<!-- 网页顶部搜索块 -->

	<div class="search_bar clearfix">
		<a href="/index" class="logo fl"><img src="/static/images/logo.png"></a>
		<div class="search_con fl">
			<input type="text" class="input_text fl" name="" placeholder="搜索商品">
			<input type="button" class="input_btn fr" name="" value="搜索">
		</div>
		<div class="guest_cart fr">
			<a href="#" class="cart_name fl">我的购物车</a>
			<div class="goods_count fl" id="show_count"></div>
		</div>
	</div>


<!-- 网页主体内容块 -->

<div class="navbar_con">
    <div class="navbar clearfix">
        <div class="subnav_con fl">
            <h1>全部商品分类</h1>	
            <span></span>			
            <ul class="subnav">
                <li><a href="#" class="fruit">新鲜水果</a></li>
                <li><a href="#" class="seafood">海鲜水产</a></li>
                <li><a href="#" class="meet">猪牛羊肉</a></li>
                <li><a href="#" class="egg">禽类蛋品</a></li>
                <li><a href="#" class="vegetables">新鲜蔬菜</a></li>
                <li><a href="#" class="ice">速冻食品</a></li>
            </ul>
        </div>
        <ul class="navlist fl">
            <li><a href="/index">首页</a></li>
            <li class="interval">|</li>
            <li><a href="">手机生鲜</a></li>
            <li class="interval">|</li>
            <li><a href="">抽奖</a></li>
        </ul>
    </div>
</div>

<div class="breadcrumb">
    <a href="#">全部分类</a>
    <span>></span>
    <a href="#">新鲜水果</a>
    <span>></span>
    <a href="#">商品详情</a>
</div>

<div class="goods_detail_con clearfix">
    <div class="goods_detail_pic fl"><img src="http://192.168.59.137:8888/group1/M00/00/00/wKg7iV66J7qEI01DAAAAAD-Ue5Y1807520"></div>

    <div class="goods_detail_list fr">
        <h3>新鲜柠檬</h3>
        <p>无</p>
        <div class="prize_bar">
            <span class="show_pirze">¥<em>20.00</em></span>
            <span class="show_unit">单  位：500g</span>
        </div>
        <div class="goods_num clearfix">
            <div class="num_name fl">数 量：</div>
            <div class="num_add fl">
                <input type="text" class="num_show fl" value="1">
                <a href="javascript:;" class="add fr">+</a>
                <a href="javascript:;" class="minus fr">-</a>	
            </div> 
        </div>
        <div class="total">总价：<em>20.00元</em></div>
        <div class="operate_btn">
            <a href="javascript:;" class="buy_btn">立即购买</a>
            <a href="javascript:;" class="add_cart" id="add_cart">加入购物车</a>				
        </div>
    </div>
</div>

<div class="main_wrap clearfix">
    <div class="l_wrap fl clearfix">
        <div class="new_goods">
            <h3>新品推荐</h3>
            <ul>
                
                <li>
                    <a href="/detail/8"><img src="http://192.168.59.137:8888/group1/M00/00/00/wKg7iV66rQaESs-aAAAAAHgye2c7412160"></a>
                    <h4><a href="/detail/8">新鲜椰子</a></h4>
                    <div class="prize">￥新鲜椰子</div>
                </li>
                
                <li>
                    <a href="/detail/4"><img src="http://192.168.59.137:8888/group1/M00/00/00/wKg7iV66NKaELEgEAAAAAExAopY7377020"></a>
                    <h4><a href="/detail/4">芒果</a></h4>
                    <div class="prize">￥芒果</div>
                </li>
                
                <li>
                    <a href="/detail/1"><img src="http://192.168.59.137:8888/group1/M00/00/00/wKg7iV66J7qEI01DAAAAAD-Ue5Y1807520"></a>
                    <h4><a href="/detail/1">新鲜柠檬</a></h4>
                    <div class="prize">￥新鲜柠檬</div>
                </li>
                

            </ul>
        </div>
    </div>

    <div class="r_wrap fr clearfix">
        <ul class="detail_tab clearfix">
            <li class="active" id='tag_detail'>商品介绍</li>
            <li id="tag_comment">评论</li>
        </ul>

        <div class="tab_content" id="tab_detail">
            <dl>
                <dt>商品详情：</dt>
                <dd></dd>
            </dl>
        </div>
        <div class="tab_content" id="tab_comment" style="display: none">
            <dl>
                
            </dl>
        </div>

    </div>
</div>





<div class="add_jump"></div>


<script type="text/javascript" src="/static/js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
   $('#tag_detail').click(function () {
            $('#tag_comment').removeClass('active');
            $(this).addClass('active');
            $('#tab_detail').show();
            $('#tab_comment').hide()
        });

        $('#tag_comment').click(function () {
            $('#tag_detail').removeClass('active');
            $(this).addClass('active');
            $('#tab_detail').hide();
            $('#tab_comment').show()
        });

        update_goods_amount();
        // 计算商品的总价格
        function update_goods_amount() {
            // 获取商品的单价和数量
            price = $('.show_pirze').children('em').text();
            count = $('.num_show').val();
            // 计算商品的总价
            price = parseFloat(price);
            count = parseInt(count);
            amount = price*count;
            // 设置商品的总价
            $('.total').children('em').text(amount.toFixed(2)+'元')
        }

        // 增加商品的数量
        $('.add').unbind().click(function (e) {

            // 获取商品原有的数目
            count = $('.num_show').val();
            // 加1
            count = parseInt(count)+1;
            // 重新设置商品的数目
            console.log(count)
            console.log($(this))
            $('.num_show').val(count);
            // 更新商品的总价
            update_goods_amount()

        });

        // 减少商品的数量
        $('.minus').click(function (e) {
            // 获取商品原有的数目
            count = $('.num_show').val();
            // 减1
            count = parseInt(count)-1;
            if (count <= 0){
                count = 1
            }
            // 重新设置商品的数目
            $('.num_show').val(count);
            // 更新商品的总价
            update_goods_amount()
        });

        // 手动输入商品的数量
        $('.num_show').blur(function () {
            // 获取用户输入的数目
            count = $(this).val();
            // 校验count是否合法
            if (isNaN(count) || count.trim().length==0 || parseInt(count) <=0){
                count = 1
            }
            // 重新设置商品的数目
            $(this).val(parseInt(count));
            // 更新商品的总价
            update_goods_amount()
        });

        // 获取add_cart div元素左上角的坐标
		var $add_x = $('#add_cart').offset().top;
		var $add_y = $('#add_cart').offset().left;

        // 获取show_count div元素左上角的坐标
		var $to_x = $('#show_count').offset().top;
		var $to_y = $('#show_count').offset().left;

		$('#add_cart').click(function(){
            // 获取商品id和商品数量
            sku_id = $(this).attr('sku_id'); // attr prop
            count = $('.num_show').val();
            // 首先在你需要发起ajax post请求的页面的里面随便一个地方加上 <input type="hidden" name="csrfmiddlewaretoken" value="liiqFUe6PUp2T7gYFRUHkLOU8xfk5fHrO31e4fzkIGklNnX9yXGwlT40O9eTMF4n">，然后再输入以下内容
            csrf = $('input[name="csrfmiddlewaretoken"]').val();
            // 组织参数
            params = {'sku_id':sku_id, 'count':count, 'csrfmiddlewaretoken':csrf};
            // 发起ajax post请求，访问/cart/add, 传递参数:sku_id count
            $.post('/cart/add/', params, function (data) {
                if (data.res == 5){
                    // 添加成功的动画
                    $(".add_jump").css({'left':$add_y+80,'top':$add_x+10,'display':'block'});
                    $(".add_jump").stop().animate({
                        'left': $to_y+7,
                        'top': $to_x+7},
                        "fast", function() {
                            $(".add_jump").fadeOut('fast',function(){
                                // 重新设置用户购物车中商品的条目数
                                $('#show_count').html(data.total_count);
                            });
			        });
                }
                else{
                    // 添加失败
                    alert(data.errmsg)
                }
            })
		})
</script>





	<div class="footer">
		<div class="foot_link">
			<a href="#">关于我们</a>
			<span>|</span>
			<a href="#">联系我们</a>
			<span>|</span>
			<a href="#">招聘人才</a>
			<span>|</span>
			<a href="#">友情链接</a>
		</div>
		<p>CopyRight © 2016 北京天天生鲜信息技术有限公司 All Rights Reserved</p>
		<p>电话：010-****888    京ICP备*******8号</p>
	</div>
    <!-- 网页底部html元素块 -->
<div class="add_jump"></div>


<script type="text/javascript" src="/static/js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
   $('#tag_detail').click(function () {
            $('#tag_comment').removeClass('active');
            $(this).addClass('active');
            $('#tab_detail').show();
            $('#tab_comment').hide()
        });

        $('#tag_comment').click(function () {
            $('#tag_detail').removeClass('active');
            $(this).addClass('active');
            $('#tab_detail').hide();
            $('#tab_comment').show()
        });

        update_goods_amount();
        // 计算商品的总价格
        function update_goods_amount() {
            // 获取商品的单价和数量
            price = $('.show_pirze').children('em').text();
            count = $('.num_show').val();
            // 计算商品的总价
            price = parseFloat(price);
            count = parseInt(count);
            amount = price*count;
            // 设置商品的总价
            $('.total').children('em').text(amount.toFixed(2)+'元')
        }

        // 增加商品的数量
        $('.add').unbind().click(function (e) {

            // 获取商品原有的数目
            count = $('.num_show').val();
            // 加1
            count = parseInt(count)+1;
            // 重新设置商品的数目
            console.log(count)
            console.log($(this))
            $('.num_show').val(count);
            // 更新商品的总价
            update_goods_amount()

        });

        // 减少商品的数量
        $('.minus').click(function (e) {
            // 获取商品原有的数目
            count = $('.num_show').val();
            // 减1
            count = parseInt(count)-1;
            if (count <= 0){
                count = 1
            }
            // 重新设置商品的数目
            $('.num_show').val(count);
            // 更新商品的总价
            update_goods_amount()
        });

        // 手动输入商品的数量
        $('.num_show').blur(function () {
            // 获取用户输入的数目
            count = $(this).val();
            // 校验count是否合法
            if (isNaN(count) || count.trim().length==0 || parseInt(count) <=0){
                count = 1
            }
            // 重新设置商品的数目
            $(this).val(parseInt(count));
            // 更新商品的总价
            update_goods_amount()
        });

        // 获取add_cart div元素左上角的坐标
		var $add_x = $('#add_cart').offset().top;
		var $add_y = $('#add_cart').offset().left;

        // 获取show_count div元素左上角的坐标
		var $to_x = $('#show_count').offset().top;
		var $to_y = $('#show_count').offset().left;

		$('#add_cart').click(function(){
            // 获取商品id和商品数量
            sku_id = $(this).attr('sku_id'); // attr prop
            count = $('.num_show').val();
            // 首先在你需要发起ajax post请求的页面的里面随便一个地方加上 <input type="hidden" name="csrfmiddlewaretoken" value="liiqFUe6PUp2T7gYFRUHkLOU8xfk5fHrO31e4fzkIGklNnX9yXGwlT40O9eTMF4n">，然后再输入以下内容
            csrf = $('input[name="csrfmiddlewaretoken"]').val();
            // 组织参数
            params = {'sku_id':sku_id, 'count':count, 'csrfmiddlewaretoken':csrf};
            // 发起ajax post请求，访问/cart/add, 传递参数:sku_id count
            $.post('/cart/add/', params, function (data) {
                if (data.res == 5){
                    // 添加成功的动画
                    $(".add_jump").css({'left':$add_y+80,'top':$add_x+10,'display':'block'});
                    $(".add_jump").stop().animate({
                        'left': $to_y+7,
                        'top': $to_x+7},
                        "fast", function() {
                            $(".add_jump").fadeOut('fast',function(){
                                // 重新设置用户购物车中商品的条目数
                                $('#show_count').html(data.total_count);
                            });
			        });
                }
                else{
                    // 添加失败
                    alert(data.errmsg)
                }
            })
		})
</script>

    <!-- 网页底部引入文件块 -->
	
</body>
</html>